﻿@page "/tree-grid/context-menu"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor
@*Hidden:Lines*@
@using ej2_blazor_treedata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
     This sample demonstrates the usage of context menu in the Tree Grid component. Right click anywhere on the Tree Grid to view context menu.
</SampleDescription>
<ActionDescription>
   <p>Tree Grid has options to show the context menu when right clicking on it. To configure the items in context menu, you should define either default or custom item in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.EJ2.Blazor~Syncfusion.EJ2.Blazor.Grids.GridModel%601~ContextMenuItems.html'>ContextMenuItems</a></code> property. Each item will be shown based on its target. The default context menu items are,</p>
      <ul>
         <li><code>Edit</code> - Edit the current record.</li>
         <li><code>Delete</code> - Delete the current record.</li>
         <li><code>Save</code> - Save the edited record.</li>
         <li><code>Cancel</code> - Cancel the edited state.</li>
         <li><code>Copy</code> - Copy the selected records.</li>
         <li><code>PdfExport</code> - Export the grid as Pdf format.</li>
         <li><code>ExcelExport</code> - Export the grid as Excel format.</li>
         <li><code>CsvExport</code> - Export the grid as CSV format.</li>
         <li><code>SortAscending</code> - Sort the current column in ascending order.</li>
         <li><code>SortDescending</code> - Sort the current column in descending order.</li>
         <li><code>FirstPage</code> - Go to the first page.</li>
         <li><code>PrevPage</code> - Go to the previous page.</li>
         <li><code>LastPage</code> - Go to the last page.</li>
         <li><code>NextPage</code> - Go to the next page.</li>
      </ul>
    <p>While using the Tree Grid in a touch environment, touch and hold the Tree Grid row cell to show the context menu.</p>
    <p>In this demo, Context Menu feature is enabled by defining the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid%601~ContextMenuItems.html'>ContextMenuItems</a> property with the default items.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
           <SfTreeGrid AllowSorting="true" TValue="BusinessObject" AllowPaging="true" ChildMapping="Children" Height="315" TreeColumnIndex="1" ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "Edit", "Delete", "Save", "Cancel", "FirstPage", "PrevPage","LastPage", "NextPage"})">
                <SfDataManager Json="@TreeDatum" Adaptor="Adaptors.JsonAdaptor"></SfDataManager>
                <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Row"></TreeGridEditSettings>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign=" Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="220"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign=" Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" ></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
                    <TreeGridColumn Field="Approved" HeaderText="Approved" Type="Syncfusion.Blazor.Grids.ColumnType.Boolean" EditType="Syncfusion.Blazor.Grids.EditType.BooleanEdit" Width="100" DisplayAsCheckBox="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public BusinessObject[] TreeDatum { get; set; }

    protected override void OnInitialized()
    {
        this.TreeDatum = TreeData.GetDefaultData().Cast<BusinessObject>().ToArray();
    }
}
